<template>
  <div class="nav-container">
    <!-- 导航条整体 -->
    <div :style="navBarStyle" class="custom-navbar">

      <!-- 左侧 logo 和学校名 -->
      <div class="left-part">
        <div class="logo-container">
          <img src="./images/logo.jpg" alt="Logo" class="logo">
          <span class="school-name">希望站</span>
        </div>
      </div>

      <!-- 右侧部分：菜单 + 搜索 -->
      <div class="right-group">
        <div class="right-elements">
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchQuery" style="width: 200px;"></el-input>
        </div>

        <div class="center-part">
          <el-menu mode="horizontal" default-active="1" background-color="transparent"
                   text-color="#fff" active-text-color="#CCCCCC" class="menu-list">
            <el-menu-item index="1"><router-link to="/">首页</router-link></el-menu-item>
            <el-menu-item index="2"><router-link to="/MedicalClinicForm">提供医馆</router-link></el-menu-item>
            <el-menu-item index="3"><router-link to="/query">查询医馆</router-link></el-menu-item>
            <el-menu-item index="4"><router-link to="/PrescriptionInquiry">查询验方</router-link></el-menu-item>
            <el-menu-item index="5"><router-link to="/SubmitFeedback">提供反馈</router-link></el-menu-item>
            <el-menu-item index="6"><router-link to="/HerbList">药材科普</router-link></el-menu-item>
            <el-menu-item index="7"><router-link to="/DiseaseStatistics">患病数据</router-link></el-menu-item>
            <el-menu-item index="8"><router-link to="/Map">导航</router-link></el-menu-item>
          </el-menu>
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped>
.nav-container {
  width: 100%;
}

.custom-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  padding: 0 50px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: rgba(152, 204, 152, 1);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(152, 204, 152, 0.6);
}

.left-part {
  display: flex;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  height: 50px;
  margin-right: 10px;
}

.school-name {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.right-group {
  display: flex;
  align-items: center;
  gap: 20px; /* 控制搜索框与菜单之间的间距 */
}

.center-part .menu-list {
  display: flex;
  justify-content: flex-end;
}

.menu-list .el-menu-item {
  color: #fff;
  font-size: 16px;
  padding: 0 12px;
}

.menu-list .el-menu-item a {
  text-decoration: none; /* 移除下划线 */
  color: inherit; /* 继承父元素的颜色 */
}

.menu-list .el-menu-item.is-active,
.menu-list .el-menu-item:hover {
  color: #CCCCCC !important;
}

.right-elements {
  display: flex;
  align-items: center;
}
</style>

<script>
export default {
  data() {
    return {
      navBarStyle: {}, // 样式已写在上面了，可以删掉或者保留原样
      searchQuery: '',
    };
  },
};
</script>